<template>
	
	<view>
		<login></login>
		<view class="part1">
			<view class="part1-1">
				<image src="../../static/background.jpg" mode="">
				</image>
				<view class="location">
					<image src="../../static/location.png" mode=""></image>
				</view>
			</view>
			<view class="part1-2">
				<!-- 顶部广告位轮播图 -->
				<swiper class="swiper" :indicator-dots="false" :autoplay="true" :interval="2500" :duration="500">
					<swiper-item v-for="(m,index) in swiperAdList" :key="index">
						<navigator open-type="navigate">
							<image class="banner-swiper-img" :src="m" mode="aspectFill">
						</navigator>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<view class="part2">
			<view class="part2-1" @tap="swiperChange(1)">
				<text class="text1">物物置换</text>
				<text class="text2">"体验不同的交易方式"</text>
			</view>
			<view class="part2-2" @tap="swiperChange(2)">
				<text class="text1">货币置换</text>
				<text class="text2">"资源利用，享受生活"</text>
			</view>
		</view>

		<swiper class="swiper-box" :style="'height:'+ swiperSliderHeight" :current="currentSwiperIndex"
			@animationfinish="swiperSlider">
			<swiper-item class="swiper-item">
				<view class="part3">
					<text class="recommend">为你推荐</text>
					<ul>
						<li v-for="(item,index) in List1" :key="index">
							<view class="li-1">
								<image :src="item.cover[0]" mode="" class="pic1"></image>
							</view>
							<view class="li-2">
								<view class="content">
									<view class="content1">
										<text class="food1">{{item.message1}}</text>
										<text class="food2">置换：{{item.message2}}</text>
									</view>
									<view class="content2">
										<image :src="item.avatar" mode=""
											style="width: 90rpx;height: 90rpx; border-radius: 50%;"></image>
									</view>
								</view>
								<view class="li-2-1">
									<text class="price">￥:{{item.message3}}</text>
									<view class="span">
										<button type="default" @tap="getCart1(index)">加入清单</button>
									</view>
								</view>
							</view>
						</li>
					</ul>
				</view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<view class="part3">
					<text class="recommend">物物置换</text>
					<ul>
						<li v-for="(item,index) in List2" :key="index">
							<view class="li-1">
								<image :src="item.cover[0]" mode="" class="pic1"></image>
							</view>
							<view class="li-2">
								<view class="content">
									<view class="content1">
										<text class="food1">{{item.message1}}</text>
										<text class="food2">置换：{{item.message2}}</text>
									</view>
									<view class="content2">
										<image :src="item.avatar" mode=""
											style="width: 90rpx;height: 90rpx; border-radius: 50%;"></image>
									</view>
								</view>
								<view class="li-2-1">
									<text class="price">￥:{{item.message3}}</text>
									<view class="span">
										<button type="default" @tap="getCart1(index)">加入清单</button>
									</view>
								</view>
							</view>
						</li>
					</ul>
				</view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<view class="part3">
					<text class="recommend">货币置换</text>
					<ul>
						<li v-for="(item,index) in List3" :key="index">
							<view class="li-1">
								<image :src="item.cover[0]" mode="" class="pic1"></image>
							</view>
							<view class="li-2">
								<view class="content">
									<view class="content1">
										<text class="food1">{{item.message1}}</text>
										<text class="food2">置换：{{item.message2}}</text>
									</view>
									<view class="content2">
										<image :src="item.avatar" mode=""
											style="width: 90rpx;height: 90rpx; border-radius: 50%;"></image>
									</view>
								</view>
								<view class="li-2-1">
									<text class="price">￥:{{item.message3}}</text>
									<view class="span">
										<button type="default" @tap="getCart1(index)">加入清单</button>
									</view>
								</view>
							</view>
						</li>
					</ul>
				</view>
			</swiper-item>
		</swiper>
	
	</view>
</template>

<script>
	const DB = wx.cloud.database();
	export default {
		created() {
			uni.$on('getId',(id)=>{
				this.id = id
				this.shopcart()
			})
			// 获取数据
			this.getdatabase()
			uni.$on("indexFeedsUpdate", () => {
				this.getdatabase()
				this.swiperSliderHeight = 230 * this.List1.length + 100 + 'rpx'
				uni.pageScrollTo({
					duration: 0, //过渡时间必须为0，uniapp bug，否则运行到手机会报错
					scrollTop: 230 * this.List1.length + 100, //滚动到目标位置
				})
			})			
		},
		data() {
			return {
				title: 'Hello',
				swiperAdList: [
					"cloud://zsq123-1ggfzcnd1baf65cd.7a73-zsq123-1ggfzcnd1baf65cd-1309882573/adminSrc/lStars.jpg",
					"cloud://zsq123-1ggfzcnd1baf65cd.7a73-zsq123-1ggfzcnd1baf65cd-1309882573/adminSrc/lonely.jpg",
					"cloud://zsq123-1ggfzcnd1baf65cd.7a73-zsq123-1ggfzcnd1baf65cd-1309882573/adminSrc/antumn.jpg"
				],
				id: '',
				openId:'',
				// 动态列表数据
				List1: [],
				// 动态列表数据
				List2: [],
				// 动态列表数据
				List3: [],
				swiperSliderHeight: '',
				currentSwiperIndex: 0,
				// 记录滚动所在的位置
				oldList1ScrollTop: 0,
				oldList2ScrollTop: 0,
				oldList3ScrollTop: 0,
			}
		},
		
		onPageScroll(event) {
			if (this.currentSwiperIndex === 0) {
				this.oldList1ScrollTop = event.scrollTop
			} else if (this.currentSwiperIndex === 1) {
				this.oldList2ScrollTop = event.scrollTop
			} else if (this.currentSwiperIndex === 2) {
				this.oldList3ScrollTop = event.scrollTop
			}

		},

		// onReachBottom() {
		// 	console.log('下拉到底啦')
		// 	// 请求新的数据

		// },
		methods: {
			// 跳转网页
			gotoTab(url) {
				uni.switchTab({
					url
				})
			},
			getdatabase() {
				DB.collection('list1').get({
					success: (res) => {
						this.List1 = res.data
						console.log(this.List1)
						this.swiperSliderHeight = 230 * this.List1.length + 100 + 'rpx'
					},
					fail: (res) => {
						console.log(res)
					}
				})
				DB.collection('list2').get({
					success: (res) => {
						this.List2 = res.data
					},
					fail: (res) => {
						console.log(res)
					}
				})
				DB.collection('list3').get({
					success: (res) => {
						this.List3 = res.data
					},
					fail: (res) => {
						console.log(res)
					}
				})
			},
			// 判断是否第一次使用，并创建数据库
			shopcart(){
				DB.collection('shopcart01').doc(this.id)
				.get({
					success:(res)=>{
						console.log("查询成功已开通")
					},
					fail: (res) =>{
						console.log("查询失败")
						DB.collection('shopcart01').add({
							data:{
								_id:this.id,
								all:[],
								run:[],
								finish:[],
							},
							success:(res)=>{
								console.log("添加购物车成功",res)
								
							},
							fail:(res)=>{
								console.log("添加失败")
							}
						})
					}
				})
			},
			// 加入购物车
			getCart1(index){
				DB.collection('list1').get({
					success:(res) =>{
					let object = res.data[index]		
					const _ = DB.command
					DB.collection('shopcart01').doc(this.id).update({
						data:{
							all:_.push(object),
							state:0,
						},
						success(res){
							console.log("添加商品成功！",res)
							uni.$emit("cartUpdate")
							uni.switchTab({
								url: '/pages/shoplist/shoplist'
							});
						},
						fail(res){
							console.log("添加失败")
						}
					})
				
					},
					fail:(res)=>{
						console.log(res)
					},
				})
			},
			
			
			// 实现滑动长度自动化
			swiperSlider(event) {
				if (event.detail.current === 0) {
					// console.log("0", this.oldList1ScrollTop)
					this.swiperSliderHeight = 230 * this.List1.length + 100 + 'rpx'
					uni.pageScrollTo({
						duration: 0, //过渡时间必须为0，uniapp bug，否则运行到手机会报错
						scrollTop: this.oldList1ScrollTop, //滚动到目标位置
					})
				} else if (event.detail.current === 1) {
					// console.log("1", this.oldList2ScrollTop)
					this.swiperSliderHeight = 230 * this.List2.length + 100 + 'rpx'
					uni.pageScrollTo({
						duration: 0, //过渡时间必须为0，uniapp bug，否则运行到手机会报错
						scrollTop: this.oldList2ScrollTop, //滚动到目标位置
					})
				} else if (event.detail.current === 2) {
					// console.log("2", this.oldList3ScrollTop)
					this.swiperSliderHeight = 230 * this.List3.length + 100 + 'rpx'
					uni.pageScrollTo({
						duration: 0, //过渡时间必须为0，uniapp bug，否则运行到手机会报错
						scrollTop: this.oldList3ScrollTop, //滚动到目标位置
					})

				}
				this.currentSwiperIndex = event.detail.current
			},
			// 点击按钮实现切换效果
			swiperChange(index) {
				if (index === 0) {
					// console.log("0", this.oldList1ScrollTop)
					this.swiperSliderHeight = 230 * this.List1.length + 100 + 'rpx'
					uni.pageScrollTo({
						duration: 0, //过渡时间必须为0，uniapp bug，否则运行到手机会报错
						scrollTop: this.oldList1ScrollTop, //滚动到目标位置
					})
				} else if (index === 1) {
					// console.log("1", this.oldList2ScrollTop)
					this.swiperSliderHeight = 230 * this.List2.length + 100 + 'rpx'
					uni.pageScrollTo({
						duration: 0, //过渡时间必须为0，uniapp bug，否则运行到手机会报错
						scrollTop: this.oldList2ScrollTop, //滚动到目标位置
					})
				} else if (index === 2) {
					// console.log("2", this.oldList3ScrollTop)
					this.swiperSliderHeight = 230 * this.List3.length + 100 + 'rpx'
					uni.pageScrollTo({
						duration: 0, //过渡时间必须为0，uniapp bug，否则运行到手机会报错
						scrollTop: this.oldList3ScrollTop, //滚动到目标位置
					})
				}
				this.currentSwiperIndex = index
			},

		},
	}
</script>

<style lang="scss" scoped>
	.part1 {
		width: 750rpx;
		height: 400rpx;
		background-color: #f0e49a;
		border-top: 2rpx solid #FFFFFF;

		.part1-1 {
			width: 750rpx;
			height: 250rpx;

			image {
				width: 750rpx;
				height: 250rpx;
			}

			.location {
				width: 90rpx;
				height: 90rpx;
				background-color: #F0AD4E;
				position: absolute;
				top: 58rpx;
				right: 20rpx;
				border-radius: 20rpx;

				image {
					width: 90rpx;
					height: 90rpx;
				}
			}
		}

		.part1-2 {

			// 广告位轮播器相关样式
			.swiper {
				width: 700upx;
				height: 300upx;
				position: absolute;
				left: 0;
				top: 250rpx;
				margin-left: 25rpx;
				text-align: center;
				z-index: 1;
				border-radius: 20rpx;
				overflow: hidden;
				// 解决手机系统 边框下圆角不显示，或者不生效问题
				transform: translateY(0);

				.banner-swiper-img {
					width: 750upx;
					height: 400upx;
					box-shadow: 0 0 2px 0 rgb(188, 188, 188);
				}
			}
		}
	}

	.part2 {
		width: 700rpx;
		margin-top: 170rpx;
		margin-left: 25rpx;
		height: 220rpx;

		display: flex;
		justify-content: space-between;

		.part2-1 {
			width: 330rpx;
			height: 200rpx;
			background-color: #E7C744;
			border-radius: 20rpx;
			display: flex;
			flex-direction: column;

			.text1 {
				font-size: 42rpx;
				font-weight: 600;
				color: #FFFFFF;
				margin: 30rpx;
			}

			.text2 {
				font-size: 32rpx;
				font-weight: 600;
				color: #FFFFFF;
			}
		}

		.part2-2 {
			width: 330rpx;
			height: 200rpx;
			background-color: #95DE64;
			border-radius: 20rpx;
			display: flex;
			flex-direction: column;

			.text1 {
				font-size: 42rpx;
				font-weight: 600;
				color: #FFFFFF;
				margin: 30rpx;
			}

			.text2 {
				font-size: 32rpx;
				font-weight: 600;
				color: #FFFFFF;
			}
		}
	}

	.part3 {
		width: 700rpx;
		margin-left: 25rpx;

		.recommend {
			font-size: 42rpx;
			font-weight: 600;
			color: #000000;
			margin: 30rpx;
		}

		ul {
			li {
				width: 700rpx;
				height: 200rpx;
				background-color: #f0e49a;
				margin-top: 10rpx;
				border-radius: 20rpx;
				display: flex;
				flex-direction: row;

				.li-1 {
					width: 160rpx;
					height: 160rpx;
					background-color: #FFFFFF;
					margin: 20rpx;

					.pic1 {
						width: 160rpx;
						height: 160rpx;
					}
				}

				.li-2 {
					width: 500rpx;
					height: 180rpx;
					margin: 10rpx 10rpx 10rpx 0rpx;
					display: flex;
					flex-direction: column;


					.li-2-1 {
						width: 500rpx;
						height: 80rpx;
						display: flex;
						justify-content: space-between;
						.price {
							font-size: 40rpx;
							font-weight: 600;
							color: #DD524D;
							margin: 20rpx;
						}

						.span {
							width: 210rpx;
							height: 70rpx;
							margin: 10rpx;
							button {
								width: 210rpx;
								height: 70rpx;
								line-height: 60rpx;
								border-radius: 10rpx;
								color: #FFFFFF;
								background-color: #f85a40;
							}
						}

					}
				}

				.content {
					width: 500rpx;
					height: 100rpx;

					display: flex;
					flex-direction: row;
				}

				.content1 {
					width: 400rpx;
					height: 100rpx;

				}

				.content2 {
					width: 90rpx;
					height: 90rpx;
					margin: 0rpx 10rpx 10rpx 10rpx;
					background-color: #FFFFFF;
					border-radius: 50%;
				}


				.food1 {
					font-size: 36rpx;
					font-weight: 600;
					color: #000000;
					display: block;
				}

				.food2 {
					font-size: 32rpx;
					color: #be0027;
					font-weight: 600;
				}

			}
		}
	}
</style>
